<template>
	<div>祖先组件</div>
	<!-- v-model:自定义属性名="变量名" -->
	<Two
		:msg="msg"
		:name="name"
		@msgInp="msgInp"
		v-model:xxx="VMode"
		ref="hello"
		:a="1"
		:b="2"
		:c="3"
	/>
	<div>自定义事件：{{ msgInpValue }}</div>
	<div>{{ VMode }}</div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
	name: "First",
});
</script>

<script setup>
// props
import { ref, provide, onMounted } from "vue";
import Two from "./Two.vue";
const msg = ref("我是你爹");
const name = ref("xiaoming");

//provide/inject
// 		对象中可以写上需要传递的属性名和属性值
const pro = ref("provide");
provide("value1", pro.value);
provide("value2", pro.value);

// 自定义事件
const msgInpValue = ref("自定义事件");
const msgInp = (data) => {
	msgInpValue.value = data;
};

// 使用v-mode
const VMode = ref("是我使用v-mode传递");

// 全局事件总线订阅
import myBus from "../../myBus";
myBus.on("ddd", (data) => {
	console.log("ddd", data);
});

// 在Vue3中,为了保证子组件的数据不被滥用,
// 所以子组件必须先通过defineExpose向外暴露数据,
// 父组件才能通过ref来获取到该数据
const hello = ref(null);
onMounted(() => {
	console.log(hello.value.sonMsg);
});
</script>
